<template>
    <div>
        <div>
            <van-search show-left v-model="value" shape="round" placeholder="现代简约风 | 主卧衣柜">
                <template #left>
                    <router-link to="/position">
                    <div>
                        金水区
                        <van-icon name="arrow-down" />
                    </div>
                    </router-link>
                </template>
            </van-search>
            <van-row>
            <van-col span="7" offset='3'>
                <router-link to="/gongsi">
                    <van-image
                    width="50"
                    height="50"
                    src="/img/zzx.png"
                    />
                    <div>找装修</div>
                </router-link>
            </van-col>
            <van-col span="7">
                <router-link to="/sheji">
                    <van-image
                    width="50"
                    height="50"
                    src="/img/zsj.png"
                    />
                    <div>找设计</div>
                </router-link>
            </van-col>
            <van-col span="7">
                <router-link to="/pinpai">
                    <van-image
                    width="50"
                    height="50"
                    src="/img/ppjc.png"
                    />
                    <div>品牌建材</div>
                </router-link>
            </van-col>
            </van-row>
        </div>
        <van-divider />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
                <img src="/company/swipe1.jpg" alt="" class="img">
            </van-swipe-item>
             <van-swipe-item>
                <img src="/company/swipe2.jpg" alt="" class="img">
            </van-swipe-item>
             <van-swipe-item>
                <img src="/company/swipe3.jpg" alt="" class="img">
            </van-swipe-item>
             <van-swipe-item>
                <img src="/company/swipe4.jpg" alt="" class="img">
            </van-swipe-item>
        </van-swipe>
        <div id="gongsi" v-for="item in 8" :key="item">
            <div>
                <van-image
                width="100"
                height="100"
                src="/company/danna.jpg"
                />
            </div>
            <div>
                <div>
                    <h4>丹拿装饰郑州分公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<van-tag color="#656974">连锁</van-tag></h4>                   
                </div>
                <div id="pingfen">
                <van-rate v-model="pingfen" allow-half void-icon="star" readonly/>
                </div>
                <div id="info">
                    <div>8-80万一套</div>
                    <div>3.4km</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
            value: '',
            pingfen:4.5
            };
        },
    }
</script>

<style lang="scss" scoped>
div{
    color: #000;
}
 .my-swipe .van-swipe-item {
    background-color: rgb(157, 120, 120);
  }
.img{
    width: 80%;
    height: 200px;
    padding: 5px 40px 0px;
}
#gongsi{
    display: flex;
    padding: 10px;
    h4{
        margin: 0 0 25px 5px;
    }
    #pingfen{
        display: flex;
    }
    #info{
    // width: 270px;
    display: flex;
    justify-content:space-between;
    margin-top: 10px;
    margin-left: 5px;
}
}

</style>